<template>
  <view class="ambassador-container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">推广大使</view>
    </view>
    
    <!-- 大使权益介绍 -->
    <view class="benefits-card">
      <view class="benefits-header">
        <view class="benefits-icon">👑</view>
        <view class="benefits-title">推广大使特权</view>
      </view>
      
      <view class="benefits-list">
        <view class="benefit-item">
          <view class="benefit-icon">🎁</view>
          <view class="benefit-text">邀请奖励翻倍</view>
        </view>
        
        <view class="benefit-item">
          <view class="benefit-icon">⭐</view>
          <view class="benefit-text">专属客服支持</view>
        </view>
        
        <view class="benefit-item">
          <view class="benefit-icon">🏆</view>
          <view class="benefit-text">月度额外奖励</view>
        </view>
        
        <view class="benefit-item">
          <view class="benefit-icon">💎</view>
          <view class="benefit-text">VIP会员权益</view>
        </view>
      </view>
    </view>
    
    <!-- 成为大使条件 -->
    <view class="requirements-card">
      <view class="requirements-title">成为推广大使条件</view>
      <view class="requirements-list">
        <view class="requirement-item">
          <view class="requirement-number">20+</view>
          <view class="requirement-text">成功邀请人数</view>
        </view>
        
        <view class="requirement-item">
          <view class="requirement-number">30%+</view>
          <view class="requirement-text">邀请转化率</view>
        </view>
        
        <view class="requirement-item">
          <view class="requirement-number">90天</view>
          <view class="requirement-text">持续活跃期</view>
        </view>
      </view>
    </view>
    
    <!-- 我的进度 -->
    <view class="progress-card">
      <view class="progress-title">我的进度</view>
      
      <view class="progress-item">
        <view class="progress-label">
          <view class="label-text">邀请人数</view>
          <view class="label-value">{{ myStats.totalInvites }}/20</view>
        </view>
        <view class="progress-bar">
          <view 
            class="progress-fill" 
            :style="{ width: Math.min((myStats.totalInvites / 20) * 100, 100) + '%' }"
          ></view>
        </view>
        <view class="progress-percent">{{ Math.min(Math.round((myStats.totalInvites / 20) * 100), 100) }}%</view>
      </view>
      
      <view class="progress-item">
        <view class="progress-label">
          <view class="label-text">转化率</view>
          <view class="label-value">{{ myStats.conversionRate }}%/30%</view>
        </view>
        <view class="progress-bar">
          <view 
            class="progress-fill" 
            :style="{ width: Math.min((myStats.conversionRate / 30) * 100, 100) + '%' }"
          ></view>
        </view>
        <view class="progress-percent">{{ Math.min(Math.round((myStats.conversionRate / 30) * 100), 100) }}%</view>
      </view>
      
      <view class="ambassador-status">
        <view v-if="isAmbassador" class="status-badge ambassador">
          <view class="status-icon">👑</view>
          <view class="status-text">您已是推广大使</view>
        </view>
        <view v-else-if="isQualified" class="status-badge qualified">
          <view class="status-icon">🎉</view>
          <view class="status-text">恭喜！您已达成条件</view>
        </view>
        <view v-else class="status-badge progress">
          <view class="status-icon">💪</view>
          <view class="status-text">继续努力，即将达成</view>
        </view>
      </view>
    </view>
    
    <!-- 推广大使排行榜 -->
    <view class="ranking-card">
      <view class="ranking-header">
        <view class="ranking-title">推广大使排行榜</view>
        <view class="ranking-subtitle">本月表现最佳的推广大使</view>
      </view>
      
      <view class="ranking-list">
        <view 
          v-for="(ambassador, index) in ambassadorList" 
          :key="index"
          class="ranking-item"
        >
          <view class="rank-number" :class="[getRankClass(index + 1)]">
            <text v-if="index < 3">{{ getRankIcon(index + 1) }}</text>
            <text v-else>{{ index + 1 }}</text>
          </view>
          
          <view class="ambassador-info">
            <image 
              :src="ambassador.user.avatar || '/static/icons/default-avatar.png'" 
              class="ambassador-avatar"
            />
            <view class="ambassador-details">
              <view class="ambassador-name">{{ ambassador.user.nickname || '推广大使' }}</view>
              <view class="ambassador-level">{{ getLevelName(ambassador.user.memberLevel) }}</view>
            </view>
          </view>
          
          <view class="ambassador-stats">
            <view class="stat-item">
              <view class="stat-value">{{ ambassador.totalInvites }}</view>
              <view class="stat-label">邀请数</view>
            </view>
            <view class="stat-item">
              <view class="stat-value">{{ ambassador.conversionRate }}%</view>
              <view class="stat-label">转化率</view>
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="ambassadorList.length === 0 && !isLoading">
          <image src="/static/icons/empty.png" class="empty-icon" />
          <view class="empty-text">暂无推广大使</view>
          <view class="empty-tip">成为第一个推广大使吧！</view>
        </view>
      </view>
    </view>
    
    <!-- 申请成为大使按钮 -->
    <view class="apply-section" v-if="isQualified && !isAmbassador">
      <button class="apply-btn" @click="applyAmbassador">
        申请成为推广大使
      </button>
    </view>
    
    <!-- 分享推广 -->
    <view class="share-section">
      <button class="share-btn" @click="shareInvite">
        <view class="btn-icon">📢</view>
        <view class="btn-text">分享邀请链接</view>
      </button>
    </view>
  </view>
</template>

<script>
import { 
  getInviteStats,
  getInviteShareInfo 
} from '@/api/invitations.js'

export default {
  name: 'AmbassadorPage',
  
  data() {
    return {
      myStats: {
        totalInvites: 0,
        conversionRate: 0,
        totalRewards: 0
      },
      ambassadorList: [],
      isLoading: false,
      shareInfo: null
    }
  },
  
  computed: {
    /**
     * 是否已达成推广大使条件
     */
    isQualified() {
      return this.myStats.totalInvites >= 20 && this.myStats.conversionRate >= 30
    },
    
    /**
     * 是否已是推广大使
     */
    isAmbassador() {
      // 这里需要从用户信息中获取，暂时用条件判断
      return this.isQualified && this.myStats.totalInvites >= 50
    }
  },
  
  onLoad() {
    this.loadData()
  },
  
  onPullDownRefresh() {
    this.loadData().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
  
  methods: {
    /**
     * 加载数据
     */
    async loadData() {
      await Promise.all([
        this.loadMyStats(),
        this.loadAmbassadorList(),
        this.loadShareInfo()
      ])
    },
    
    /**
     * 加载我的统计
     */
    async loadMyStats() {
      try {
        const result = await getInviteStats()
        
        if (result.success) {
          this.myStats = {
            totalInvites: result.data.totalInvites || 0,
            conversionRate: result.data.completionRate || 0,
            totalRewards: result.data.totalRewards || 0
          }
        }
      } catch (error) {
        console.error('加载我的统计失败:', error)
      }
    },
    
    /**
     * 加载推广大使列表
     */
    async loadAmbassadorList() {
      try {
        // 这里需要调用推广大使API，暂时模拟数据
        this.ambassadorList = [
          {
            user: {
              id: 1,
              nickname: '邀请达人',
              avatar: '',
              memberLevel: 'gold'
            },
            totalInvites: 156,
            conversionRate: 85,
            totalRewards: 15600
          },
          {
            user: {
              id: 2,
              nickname: '推广专家',
              avatar: '',
              memberLevel: 'platinum'
            },
            totalInvites: 128,
            conversionRate: 78,
            totalRewards: 12800
          },
          {
            user: {
              id: 3,
              nickname: '邀请王者',
              avatar: '',
              memberLevel: 'diamond'
            },
            totalInvites: 98,
            conversionRate: 92,
            totalRewards: 9800
          }
        ]
      } catch (error) {
        console.error('加载推广大使列表失败:', error)
      }
    },
    
    /**
     * 加载分享信息
     */
    async loadShareInfo() {
      try {
        const result = await getInviteShareInfo()
        
        if (result.success) {
          this.shareInfo = result.data
        }
      } catch (error) {
        console.error('加载分享信息失败:', error)
      }
    },
    
    /**
     * 申请成为推广大使
     */
    applyAmbassador() {
      uni.showModal({
        title: '申请推广大使',
        content: '您已达成推广大使条件，是否申请成为推广大使？',
        success: (res) => {
          if (res.confirm) {
            // 这里调用申请API
            this.showSuccess('申请已提交，请等待审核')
          }
        }
      })
    },
    
    /**
     * 分享邀请
     */
    shareInvite() {
      if (!this.shareInfo) {
        this.showError('分享信息加载中，请稍后重试')
        return
      }
      
      uni.navigateTo({
        url: '/pages/invite/index'
      })
    },
    
    /**
     * 获取排名样式类
     */
    getRankClass(rank) {
      if (rank === 1) return 'rank-first'
      if (rank === 2) return 'rank-second'
      if (rank === 3) return 'rank-third'
      return ''
    },
    
    /**
     * 获取排名图标
     */
    getRankIcon(rank) {
      const icons = {
        1: '🥇',
        2: '🥈',
        3: '🥉'
      }
      return icons[rank] || rank
    },
    
    /**
     * 获取等级名称
     */
    getLevelName(level) {
      const levelNames = {
        bronze: '青铜会员',
        silver: '白银会员',
        gold: '黄金会员',
        platinum: '铂金会员',
        diamond: '钻石会员'
      }
      return levelNames[level] || '普通会员'
    },
    
    /**
     * 显示成功提示
     */
    showSuccess(message) {
      uni.showToast({
        title: message,
        icon: 'success'
      })
    },
    
    /**
     * 显示错误提示
     */
    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ambassador-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.nav-bar {
  background: white;
  padding: 20rpx 40rpx;
  text-align: center;
  border-bottom: 1rpx solid #e0e0e0;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.benefits-card,
.requirements-card,
.progress-card,
.ranking-card {
  background: white;
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.benefits-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.benefits-icon {
  font-size: 40rpx;
  margin-right: 16rpx;
}

.benefits-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.benefits-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.benefit-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f9ff;
  border-radius: 12rpx;
}

.benefit-icon {
  font-size: 24rpx;
  margin-right: 12rpx;
}

.benefit-text {
  font-size: 26rpx;
  color: #333;
}

.requirements-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.requirements-list {
  display: flex;
  justify-content: space-around;
}

.requirement-item {
  text-align: center;
  flex: 1;
}

.requirement-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 8rpx;
}

.requirement-text {
  font-size: 24rpx;
  color: #666;
}

.progress-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.progress-item {
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.label-text {
  font-size: 28rpx;
  color: #333;
}

.label-value {
  font-size: 26rpx;
  color: #667eea;
  font-weight: bold;
}

.progress-bar {
  height: 12rpx;
  background: #e0e0e0;
  border-radius: 6rpx;
  overflow: hidden;
  margin-bottom: 8rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 6rpx;
  transition: width 0.3s ease;
}

.progress-percent {
  text-align: right;
  font-size: 24rpx;
  color: #666;
}

.ambassador-status {
  margin-top: 30rpx;
  text-align: center;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 16rpx 32rpx;
  border-radius: 50rpx;
  
  &.ambassador {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #333;
  }
  
  &.qualified {
    background: linear-gradient(135deg, #52c41a, #73d13d);
    color: white;
  }
  
  &.progress {
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    color: white;
  }
}

.status-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.status-text {
  font-size: 26rpx;
  font-weight: bold;
}

.ranking-header {
  margin-bottom: 30rpx;
}

.ranking-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.ranking-subtitle {
  font-size: 24rpx;
  color: #666;
}

.ranking-list {
  space-y: 20rpx;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.rank-number {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  color: #666;
  margin-right: 24rpx;
  
  &.rank-first {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: white;
    border-radius: 50%;
  }
  
  &.rank-second {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: white;
    border-radius: 50%;
  }
  
  &.rank-third {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    color: white;
    border-radius: 50%;
  }
}

.ambassador-info {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 20rpx;
}

.ambassador-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.ambassador-details {
  flex: 1;
}

.ambassador-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 4rpx;
}

.ambassador-level {
  font-size: 22rpx;
  color: #667eea;
}

.ambassador-stats {
  display: flex;
}

.stat-item {
  text-align: center;
  margin-left: 32rpx;
  
  &:first-child {
    margin-left: 0;
  }
}

.stat-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 4rpx;
}

.stat-label {
  font-size: 22rpx;
  color: #666;
}

.empty-state {
  text-align: center;
  padding: 120rpx 40rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.empty-tip {
  font-size: 26rpx;
  color: #999;
}

.apply-section,
.share-section {
  margin: 40rpx 20rpx;
}

.apply-btn,
.share-btn {
  width: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 32rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.share-btn {
  background: linear-gradient(135deg, #52c41a, #73d13d);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
}

.btn-text {
  font-size: 28rpx;
}
</style>